<template>
    <view class="page-body">
        <!-- 页面内容开始 -->

        <!-- 表格搜索组件开始 -->
        <vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
            @search="search"></vk-data-table-query>
        <!-- 表格搜索组件结束 -->

        <!-- 自定义按钮区域开始 -->
        <view>
            <el-row>
                <el-button type="primary" size="small" @click="exporttable">导出查询</el-button>
                <el-dropdown style="margin-left: 20px;" v-if="table1.multipleSelection" :split-button="false"
                    trigger="click" @command="batchBtn">
                    <el-button type="danger" size="small" :disabled="table1.multipleSelection.length === 0">
                        批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="1">批量退款</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </el-row>
        </view>
        <!-- 自定义按钮区域结束 -->

        <!-- 表格组件开始 -->
        <vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
            :right-btns="['detail_auto']" :selection="true" :row-no="true" :pagination="true"
            @current-change="currentChange" size="mini" @selection-change="selectionChange">
            <template v-slot:button1="{ row }">
                <el-button size="mini" type="danger" @click="refunt(row)">退押金</el-button>

            </template>
        </vk-data-table>
        <!-- 表格组件结束 -->

        <!-- 添加或编辑的弹窗开始 -->
        <vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form"
            :close-on-click-modal="false">
            <vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
                :form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
                @success="form1.props.show = false; refresh();"></vk-data-form>
        </vk-data-dialog>
        <!-- 添加或编辑的弹窗结束 -->

        <!-- 页面内容结束 -->
    </view>
</template>

<script>
var that;													// 当前页面对象
var vk = uni.vk;									// vk实例
var originalForms = {};						// 表单初始化数据

export default {
    data() {
        // 页面数据变量
        return {
            // 页面是否请求中或加载中
            loading: false,
            // init请求返回的数据
            data: {

            },
            // 表格相关开始 -----------------------------------------------------------
            table1: {
                // 表格数据请求地址
                action: "admin/refund/sys/getList",
                // 表格字段显示规则
                columns: [
                    { key: "button1", title: "操作", type: "text", width: 120, fixed: "right" },
                    { key: "booth.name", title: "展位名称", type: "text", sortable: "custom" },
                    { key: "order_id", title: "订单id", type: "text", width: 160, sortable: "custom", show: ["detail"] },
                    { key: "booth.booth_no", title: "展位编号", type: "text", width: 160, sortable: "custom" },
                    { key: "userinfo.realname", title: "真实姓名", type: "text", width: 150, sortable: "custom" },
                    { key: "userinfo.mobile", title: "手机", type: "text", width: 150, sortable: "custom" },
                    { key: "contract_no", title: "合同编号", type: "text", width: 160, sortable: "custom" },
                    { key: "booth.tenancy", title: "租期结束日期", type: "date", width: 160, sortable: "custom" },
                    { key: "earnest_money_out_trade_no_info.out_trade_no", title: "交易流水号", type: "text", width: 160, sortable: "custom" },
                    { key: "earnest_money_out_trade_no_info.transaction_id", title: "微信交易流水号", type: "text", width: 200, sortable: "custom" },

                    { key: "earnest_money_out_trade_no_info.total_fee", title: "金额", type: "money", width: 200, sortable: "custom" },
                    { key: "user_id", title: "用户id", type: "text", width: 160, sortable: "custom", show: ["detail"] },

                    { key: "earnest_money_out_trade_no_info._add_time", title: "订单支付日期", type: "date", width: 160, sortable: "custom" },

                ],
                stripe: true,
                size: "mini",
                border: true,
                // 多选框选中的值
                multipleSelection: [],
                // 当前高亮的记录
                selectItem: ""
            },
            // 表格相关结束 -----------------------------------------------------------
            // 表单相关开始 -----------------------------------------------------------
            // 查询表单请求数据
            queryForm1: {
                // 查询表单数据源，可在此设置默认值
                formData: {

                },
                // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
                columns: [

                    { key: "booth.name", title: "展位名称", type: "text", width: 150, sortable: "custom", mode: '%%', lastWhereJson: true },

                    { key: "booth.booth_no", title: "展位编号", type: "text", width: 160, sortable: "custom" , mode: '%%', lastWhereJson: true },
                    { key: "userinfo.realname", title: "真实姓名", type: "text", width: 150, sortable: "custom", mode: '%%', lastWhereJson: true  },
                    { key: "userinfo.mobile", title: "手机", type: "text", width: 150, sortable: "custom" , mode: '%%', lastWhereJson: true },

                    { key: "earnest_money_out_trade_no_info.out_trade_no", title: "交易流水号", type: "text", width: 160, sortable: "custom", mode: '%%', lastWhereJson: true  },
                    { key: "earnest_money_out_trade_no_info.transaction_id", title: "微信交易流水号", type: "text", width: 160, sortable: "custom" , mode: '%%', lastWhereJson: true },


                ]
            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {

                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "",
                    // 表单字段显示规则
                    columns: [

                        { key: "name", title: "摊位名称", type: "text", sortable: "custom" },
                        { key: "location", title: "摊位位置", type: "text", sortable: "custom" },

                    ],
                    // 表单验证规则
                    rules: {

                    },
                    // add 代表添加 update 代表修改
                    formType: "",
                    // 是否显示表单的弹窗
                    show: false
                }
            },
            // 其他弹窗表单
            formDatas: {},
            // 表单相关结束 -----------------------------------------------------------
        };
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() { },
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() { },
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() { },
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {
            originalForms["form1"] = vk.pubfn.copyObject(that.form1);
        },
        // 页面跳转
        pageTo(path) {
            vk.navigateTo(path);
        },
        // 表单重置
        resetForm() {
            vk.pubfn.resetForm(originalForms, that);
        },
        // 搜索
        search() {
            that.$refs.table1.search();
        },
        // 刷新
        refresh() {
            that.$refs.table1.refresh();
        },
        // 获取当前选中的行的数据
        getCurrentRow() {
            return that.$refs.table1.getCurrentRow();
        },
        // 监听 - 行的选中高亮事件
        currentChange(val) {
            that.table1.selectItem = val;
        },
        // 当选择项发生变化时会触发该事件
        selectionChange(list) {
            that.table1.multipleSelection = list;
        },
        async batchrefunt() {
            let _ids = [];
            this.table1.multipleSelection.map((item, index) => {
                _ids.push(item.earnest_money_out_trade_no);
            });
            vk.confirm(`此操作不可逆,是否批量退回用户押金??`, (res) => {
                if (res.confirm) {
                    vk.callFunction({
                        url: 'admin/system_uni/pay-orders/sys/batchrefund',
                        title: '请求中...',
                        data: {
                            out_trade_nos: _ids,
                        },
                        success: async (data) => {
                            vk.alert(data.msg)

                            that.$refs.table1.refresh();
                        }
                    });
                }
            })

        },
        async refunt(order) {
            console.log(order)
            vk.confirm(`此操作不可逆,是否退回用户押金??`, (res) => {
                if (res.confirm) {
                    vk.callFunction({
                        url: 'admin/system_uni/pay-orders/sys/refund',
                        title: '请求中...',
                        data: {
                            out_trade_no: order.earnest_money_out_trade_no,
                        },
                        success: async (data) => {
                            vk.alert(data.msg)
                            that.$refs.table1.refresh();
                        }
                    });
                }
            })

        },

        // 监听 - 批量操作的按钮点击事件
        batchBtn(index) {
            switch (index) {
                case 1: this.batchrefunt(); break;
                default: break;
            }
        },
        exporttable() {
            this.$refs.table1.exportExcel({
                fileName: "用户押金可退列表",
                title: "正在导出数据...",
                pageIndex: 1,
                pageSize: -1, // 此值为-1，代表导出所有数据
            });
        }
    },
    // 监听属性
    watch: {

    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    }
};
</script>
<style lang="scss" scoped>
.page-body {}
</style>
